<!--列表页面的关键字部分-->
<template>
	<div>
		<ul class="v-sortkey">
			<li :class="{'activeLi':GoodName}"  @click="ClassfyShowAll()">
				 {{GoodName ? GoodName : '全部分类'}}
				 <span class="cjyUp" :class="{cjyDown:showClassfy}">
						<i class="cjy-arrow"></i>
				</span>
			</li>
			<li :class="{'activeLi':sortName}"  @click="sortShowAll()">
					 {{sortName ? sortName : '默认排序'}}
					<span class="cjyUp" :class="{cjyDown:showSort}">
						<i class="cjy-arrow"></i>
				 </span>
			</li>
			<li @click="showFilterLayer()">
				筛选 
				 <span class="cjyright">
						<i class="cjy-arrow"></i>
				</span>  
			</li>
		</ul>
		<!-- 全部分类列表开始 -->
		 <div class="fuzzylayer-sortlist" v-show="showClassfy" @click="hideLayer()"></div>
		 <ul v-show="showClassfy" class="v-sortlist">
				 <li :class=" {'active': classIdx == key}" v-for="(item,key) in classifyData"  @click="filterClassify(item.goodsClassCode,key,item.goodsClassName)">{{item.goodsClassName}}</li>
		 </ul>
		<!-- 全部分类列表结束 -->
		<!-- 默认排序开始 -->
		<div class="fuzzylayer-sortlist" v-show="showSort" @click="hideLayer()"></div>
		<ul class="v-sortlist" v-show="showSort">
			<li :class=" {'active': idx == index}" v-for="(sortItem,index) in sortList" @click="sortBy(sortItem.sortKey,sortItem.name)">{{sortItem.name}}</li>
		</ul>
		<!-- 默认排序结束 -->
		<!-- 筛选开始 -->
		<div class="filter-layer" v-show="isShow" @click="hideLayer()"></div>
		<div class="filter-wrap" v-show="isShow" transition="filter">
			<div class="filter-main"  v-show="!showAll">
				 <div class="priceModel">
						<h3>价格区间</h3>
						<div class="prod">
							<input class="getMinPrice" placeholder="最低价"  v-model="getMinPrice" ref="minPriceInput" v-on:blur="submitMin(getMinPrice)" @keyup.enter="submitMin(getMinPrice)" type="tel"  /> - 
							<input class="getMaxPrice" placeholder="最高价" v-model="getMaxPrice" ref="maxPriceInput" v-on:blur="submitMax(getMaxPrice)" @keyup.enter="submitMax(getMaxPrice)" type="tel" />
						</div>
				</div>
				<div class="brandModel">
						<h3>品牌</h3>
						<ul class="brand-ul" v-if="brandLists">
							<li v-for="(item,index) in brandLists" :class="{'active': fBrandIdx == index}" @click="chooseBrand(item.brandId,index)"><span>{{item.brandName}}</span></li>
					 </ul>
				</div>

			</div>
			<!-- 全部品牌字母检索 -->
			<div class="allBrand" v-show="showAll">
				<div class="allBrandModel">
					<span @click="GoBack" class="goBackArrow"><i class="icon njfont nj-goback"></i></span>
					<h3>全部品牌</h3>
					<div class="brand-container">
						<ul class="brand-ul" v-if="brandLists">
								<li v-for="(item,index) in AllbrandLists" :class="{'active': fBrandIdx == index}" @click="chooseBrand(item.brandId,index)"><span>{{item.brandName}}</span></li>
						</ul>
					</div>
				</div>
				<!-- <ul class="CharCode">
					<li @click="char(item)"  v-for="item in CharCodeList">{{item}}</li>
				</ul> -->
			</div>
			<div class="filter-btn">
				<span class="bt1" @click="resetFilter()">重置</span>
				<span class="bt2" @click="filterGDList()">完成({{this.num}})</span>
			</div>
		</div>
		<!-- 筛选结束 -->
	</div>
</template>

<script>
import { queryBrandList } from "@/utils/ReturnAxios";
import { mapGetters, mapMutations } from "vuex";

export default {
	data() {
		return {
			sortList: [
				{
					name: "默认排序",
					sortKey: 0
				},
				{
					name: "价格高到低",
					sortKey: 1
				},
				{
					name: "价格低到高",
					sortKey: 2
				},
				{
					name: "销量高到低",
					sortKey: 3
				}
				// ,
				// {
				// 	name: "销量低到高",
				// 	sortKey: 4
				// }
				// {
				// 	name: "优惠优先",
				// 	sortKey: 5
				// }
			],
			GoodName: "", //分类名称标题
			sortName: "", //排序名称
			showClassfy: false,
			showSort: false,
			isShow: false, //筛选层的显示隐藏
			idx: 0,
			classIdx: 0,
			fBrandIdx: null, // 品牌索引值
			brandLists: [],
			AllbrandLists: [],
			// 过滤数据字段
			goodsClassCode: "", //商品名称
			isPutTimeSort: 2, //默认排序
			ifSaleSort: "", //销量排序  1 正序，2 逆序
			ifWspriceSort: "", // 价格排序  1 正序，2 逆序
			ifPreferSort: "", //是否优惠优先排序  1 是，0 否
			minPrice: "", //最低价
			maxPrice: "", //最高价
			brandId: "", //品牌id
			CharCodeList: [], //字母表
			showAll: false,
			brandOpCode: "",
			price1: "",
			price2: ""
		};
	},
	props: {
		num: {
			type: Number,
			default: 0
		}
	},
	watch: {
		classifyData(val) {
			this.classifyData.unshift({ goodsClassName: "全部", goodsclasscode: "" });
		},
		config(data) {
			console.log(data, "data");
			this.$store.commit("cjy/CHANGE_COUPONS_CONFIG", data);
		}
	},
	beforeCreate() {
		//获取分类列表
		if (!this.$store.getters["cjy/newClassifyData"]) {
			this.$store.dispatch("cjy/queryNewClassifyList");
		}
	},
	computed: {
		classifyData() {
			return this.$store.getters["cjy/newClassifyData"];
		},
		config() {
			let config = {};
			this.goodsClassCode ? (config.goodsClassCode = this.goodsClassCode) : "";
			this.isPutTimeSort ? (config.isPutTimeSort = this.isPutTimeSort) : config.isPutTimeSort == 2;
			this.ifSaleSort ? (config.ifSaleSort = this.ifSaleSort) : "";
			this.ifWspriceSort ? (config.ifWspriceSort = this.ifWspriceSort) : "";
			this.ifPreferSort ? (config.ifPreferSort = this.ifPreferSort) : "";
			this.minPrice ? (config.minPrice = this.minPrice) : "";
			this.maxPrice ? (config.maxPrice = this.maxPrice) : "";
			this.brandId ? (config.brandId = this.brandId) : "";
			this.brandOpCode ? (config.brandOpCode = this.brandOpCode) : "";
			return config;
		},
		getMinPrice: {
			set() {
				let dom = document.querySelector(".getMinPrice");
				console.log("打印dom", dom)
				let val = dom.value;
				console.log('打印数据: ', val);
				let reg = /^[0-9]{0,}$/;
				if (reg.test(val)) {
					this.price1 = val;
				} else {
					this.$refs.minPriceInput.value = this.price1;
				}
			},
			get() {
				return this.price1;
			}
		},
		getMaxPrice: {
			set() {
				let dom = document.querySelector(".getMaxPrice");
				let val = dom.value;
				let reg = /^[0-9]{0,}$/;
				if (reg.test(val)) {
					this.price2 = val;
				} else {
					this.$refs.maxPriceInput.value = this.price2;
				}
			},
			get() {
				return this.price2;
			}
		}
	},
	methods: {
		// 初始化品牌数据
		async brandData() {
			let config = {
				promCode: this.$route.query.promCode,
				pageTag: "goods"
			};
			var ress = await queryBrandList(config);
			var brandData = ress.data.data[0];
			this.AllbrandLists = brandData;
			if (brandData.length && brandData.length > 30) {
				brandData.splice(29, 0, { brandName: "全部品牌…", brandId: "all" });
				this.brandLists = brandData.slice(0, 30);
			} else {
				this.brandLists = brandData;
			}
		},
		//点击隐藏蒙层
		hideLayer() {
			this.showClassfy = false;
			this.showSort = false;
			this.isShow = false;
		},
		// 点击全部分类
		ClassfyShowAll() {
			this.showSort = false;
			this.showClassfy = !this.showClassfy;
		},
		// 点击默认排序
		sortShowAll() {
			this.showClassfy = false;
			this.showSort = !this.showSort;
		},
		// 点击全部分类数据
		filterClassify(code, key, name) {
			this.classIdx = key;
			console.log("code", code, key);
			setTimeout(() => {
				this.showClassfy = false;
			}, 100);
			this.GoodName = code ? name : "";
			this.goodsClassCode = code;
		},
		// 点击默认排序数据
		sortBy(key, name) {
			this.idx = key;
			console.log(this.idx, "key");
			setTimeout(() => {
				this.showSort = false;
			}, 100);
			this.sortName = key ? name : "";
			switch (key) {
				case 0:
					this.isPutTimeSort = 2;
					this.ifSaleSort = null;
					this.ifPreferSort = null;
					this.ifWspriceSort = null;
					break;
				case 1:
					this.ifWspriceSort = 2;
					this.isPutTimeSort = null;
					this.ifSaleSort = null;
					this.ifPreferSort = null;
					break;
				case 2:
					this.ifWspriceSort = 1;
					this.isPutTimeSort = null;
					this.ifSaleSort = null;
					this.ifPreferSort = null;
					break;
				case 3:
					this.ifSaleSort = 2;
					this.isPutTimeSort = null;
					this.ifWspriceSort = null;
					this.ifPreferSort = null;
					break;
				case 4:
					this.ifSaleSort = 1;
					this.isPutTimeSort = null;
					this.ifWspriceSort = null;
					this.ifPreferSort = null;
					break;
				case 5:
					this.ifPreferSort = 1;
					this.isPutTimeSort = null;
					this.ifSaleSort = null;
					this.ifWspriceSort = null;
					break;
			}
		},
		//点击筛选
		showFilterLayer() {
			this.showClassfy = false;
			this.showSort = false;
			this.isShow = true;
		},
		// 选择品牌
		chooseBrand(id, index) {
			console.log("选择品牌");
			if (id == "all") {
				this.showAll = true;
				this.AllbrandLists.splice(29, 1);
			} else {
				this.fBrandIdx = index;
				this.brandId = id;
			}
		},
		//筛选重置操作
		resetFilter() {
			console.log("重置");
			this.minPrice = "",
			this.maxPrice = "",
			this.price1 = "",
			this.price2 = "",
			this.brandId = null,
			this.fBrandIdx = null
		},
		//筛选确定操作
		filterGDList() {
			console.log(this.minPrice, this.maxPrice, "文本框数据");
			this.isShow = false;
		},
		// 26个英文字母
		CharCode() {
			for (var i = 65; i < 91; i++) {
				this.CharCodeList.push(String.fromCharCode(i));
			}
		},
		GoBack() {
			this.showAll = false;
		},
		char(item) {
			this.brandOpCode = item;
			this.brandId = "";
		},
		submitMin(val) {
      		console.log(val,'val',this.price1)
			this.minPrice = this.price1;
			console.log("提交了吗", this.price1);
		},
		submitMax(val) {
			this.maxPrice = this.price2;
			console.log("提交了吗22", val);
		}
	},
	created() {
		this.brandData();
		// this.CharCode()
	}
};
</script>

<style>
.v-sortkey {
	width: 100%;
	height: 2rem;
	background: white;
	box-sizing: border-box;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	display: flex;
	position: relative;
	z-index: 2;
	/*筛选样式修改*/
}

.v-sortkey li {
	flex: 1;
	height: 100%;
	font-size: 0.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.v-sortkey li.activeLi {
	color: #38b035;
}
.v-sortkey li.activeLi .cjy-arrow {
	border-bottom: 0.35rem solid #38b035;
}
.fuzzylayer-sortlist {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.3;
	background: black;
}

.v-sortlist {
	transition: 0.9s;
	width: 100%;
	background: white;
	position: absolute;
	z-index: 1100;
	max-height: 16rem;
	overflow: auto;
	box-sizing: border-box;
}

.v-sortlist li {
	text-align: left;
	padding: 0 1rem;
	height: 1.6rem;
	line-height: 1.6rem;
	border-bottom: 1px solid #eaeaea;
}

.v-sortlist li.active {
	color: #38b035;
}

.filter-layer {
	position: fixed;
	z-index: 1200;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.3);
}

.filter-wrap {
	position: fixed;
	z-index: 1300;
	width: 75%;
	height: 100%;
	right: 0;
	top: 0;
	background: white;
	display: flex;
	flex-direction: column;
}

.filter-wrap .filter-main {
	flex: 1;
	padding: 1rem 0.5rem 0 1rem;
	box-sizing: border-box;
	overflow: scroll;
	position: relative;
}
.filter-main h3 {
	text-align: left;
	font-size: 0.7rem;
	line-height: 1.8rem;
}
.priceModel {
	margin-bottom: 0.6rem;
}
.priceModel .prod {
	text-align: left;
}
.prod input {
	width: 45%;
	border: 1px solid #ddd;
	text-align: center;
	height: 1.2rem;
	line-height: 1.2rem;
	display: inline-block;
}
.brand-ul {
	text-align: left;
	overflow: auto;
	/* max-height: 25rem; */
	padding-bottom: 2rem;
}

.brand-ul li {
	border: 1px solid #ddd;
	padding: 0 0.2rem;
	text-align: center;
	margin: 0 0.3rem 0.5rem 0;
	font-size: 0.6rem;
	width: 30%;
	float: left;
	height: 1.5rem;
	line-height: 1.5rem;
	box-sizing: border-box;
}
.brand-ul li span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.brand-ul li.active {
	border: 1px solid #9aed96;
	color: #38b035;
	background: #e0f5df;
	box-sizing: border-box;
}

.cjy-arrow {
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0%;
	margin: auto;
	border-left: 0.25rem solid transparent;
	border-right: 0.25rem solid transparent;
	border-bottom: 0.35rem solid #999;
	border-top: 0 solid transparent;
	/*margin-bottom: -0.175rem;*/
}
.cjyUp {
	transform: rotateZ(-180deg);
	transition: 0.3s;
	height: 100%;
	width: 0.5rem;
	margin-left: 0.3rem;
	/* position: absolute;
		right: 0.2rem;
		top: 0 */
}

.cjyDown {
	transform: rotateZ(0deg);
}
.cjyright {
	transform: rotateZ(90deg);
	position: absolute;
	transition: 0.3s;
	right: 1.3rem;
	height: 100%;
	width: 0.5rem;
	top: 0;
}
.filter-btn {
	width: 75%;
	height: 2rem;
	line-height: 2rem;
	position: fixed;
	bottom: 0;
	display: flex;
	box-sizing: border-box;
	text-align: center;
}

.filter-btn span {
	display: block;
	flex: 1;
	color: #fff;
	font-size: 0.8rem;
}
.filter-btn .bt1 {
	background: #cecece;
}
.filter-btn .bt2 {
	color: #fff;
	background: #ef5423;
	flex: 2;
}

.filter-transition {
	transition: transform 200ms ease-in;
}

.filter-enter,
.filter-leave {
	transform: translate3d(100%, 0, 0);
}

.sortlist-transition {
	transition: transform 200ms ease-in;
}

.sortlist-enter,
.sortlist-leave {
	transform: translate3d(0, -100%, 0);
}
.allBrand {
	padding: 1rem 0.5rem 0 1rem;
	box-sizing: border-box;
	position: relative;
	height: 100%;
}
.allBrandModel {
	position: relative;
	height: 100%;
}
.allBrandModel h3 {
	text-align: left;
	line-height: 2rem;
	padding-left: 2rem;
}
.goBackArrow {
	text-align: left;
	width: 2rem;
	height: 1.2rem;
	position: absolute;
	left: 0;
	top: 0.5rem;
}
.brand-container {
	height: 88%;
	overflow: scroll;
}
.brand-container .brand-ul {
}
.CharCode {
	position: absolute;
	right: 0.2rem;
	top: 0.5rem;
	font-size: 0.7rem;
}
</style>